<template>
    <div class="drawer_form_mode">
        <el-drawer :title="state ? '邮件转发' : '邮件回复' " v-model="drawerShow" 
            direction="rtl" :before-close="handleClose" :size="900"
            :close-on-click-modal="false">
            <el-form :model="emailForm" ref="formRef" :inline="true" 
                label-position="top" require-asterisk-position="right">
                <el-row :gutter="24">
                    <el-col :span="24" class="relative">
                        <div style="position: absolute;right: 12px;top: 0px;">
                            <el-button link type="primary" @click="isAddCC = true">添加抄送人</el-button>
                        </div>
                        <el-form-item label="收件人" prop="receiverList">
                            <DataCommunicationBook v-model="emailForm.receiverList" :readonly="!state" placeholder="请选择收件人"></DataCommunicationBook>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24" v-if="isAddCC">
                        <el-form-item label="抄送人" prop="ccList">
                            <DataCommunicationBook v-model="emailForm.ccList" placeholder="请选择抄送人"></DataCommunicationBook>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="主题" prop="title">
                            <el-input v-model="emailForm.title" placeholder="请输入邮件主题"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24" class="relative">
                        <div style="position: absolute;right: 12px;top: -5px;">
                            <DataUploadPlus v-model="emailForm.fileList" :showFileList="false" label="添加附件"
                                @finish="finish"></DataUploadPlus>
                        </div>
                        <el-form-item label="正文" prop="content">
                            <editor v-model="emailForm.content" :min-height="260"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="18" v-if="emailForm.fileList.length">
                        <el-form-item label="附件信息" prop="plicyNo">
                            <ul>
                            <li v-for="(fItem, fIndex) in emailForm.fileList" class="flex">
                                <i class="icon-base icon-base-appendix" 
                                    style="font-size: 20px;margin-top: 2px;color: #27A3FF;margin-right: 10px;"></i>
                                <p style="width: 450px;color: #999;font-size: 14px;">{{ fItem.name }}</p>
                                <el-button link type="primary" @click="removeFile(fItem, fIndex)">移 除</el-button>
                            </li>
                        </ul>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="引用邮件" prop="plicyNo">
                            <div class="width-all">
                                <el-button link type="primary">{{ emailForm.quteMailTitle }}</el-button>
                                <el-button link type="primary" @click="isShowQuoteContent = !isShowQuoteContent">
                                    <i :class="[ 'icon-base margin-right-sm', !isShowQuoteContent ? ' icon-base-arrow-down-bold' : 'icon-base-arrow-up-bold' ]"></i>
                                    {{ !isShowQuoteContent ? '展开' : '收起' }}
                                </el-button>
                            </div>
                            <div style="border: 1px solid #eee;padding: 10px;width: 100%;" v-if="isShowQuoteContent">
                                <div class="detail_item">
                                    <span>发件人：</span>
                                    <el-tag type="warning">{{ emailDetailInfo.senderName || '-' }}</el-tag>
                                </div>
                                <div class="detail_item">
                                    <span>时间：</span>
                                    <p>{{ formatDate.dateTimeAllFormat( emailDetailInfo.sendTime || '') }}</p>
                                </div>
                                <div class="detail_item">
                                    <span>收件人：</span>
                                    <el-tag v-for="item in emailDetailInfo.receiversList" class="margin-right-sm">{{ item }}</el-tag></div>
                                <div class="detail_item" v-if="emailDetailInfo.ccList && emailDetailInfo.ccList.length">
                                    <span>抄送人：</span>
                                    <el-tag v-for="item in emailDetailInfo.ccList" class="margin-right-sm">{{ item }}</el-tag>
                                </div>
                                <div class="detail_content">
                                    <div class="content">
                                        <div v-html="emailDetailInfo.richText" class="ql-editor"></div>
                                    </div>
                                </div>
                                <div class="file_list" v-if="emailDetailInfo.fileList && emailDetailInfo.fileList.length">
                                    <h3>附件信息</h3>
                                    <ul>
                                        <li v-for="fItem in emailDetailInfo.fileList" class="flex margin-bottom-sm file_item">
                                            <i class="icon-base icon-base-appendix" 
                                                style="font-size: 20px;margin-top: 2px;color: #27A3FF;margin-right: 10px;"></i>
                                            <p style="width: 450px;color: #999;font-size: 14px;">{{ fItem.name }}</p>
                                            <el-button link type="primary" @click="downLoadFile(fItem)">下 载</el-button>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="warning" @click="temporarySave">存草稿</el-button>
                    <el-button @click="handleClose">取 消</el-button>
                    <el-button type="primary" @click="submitForm">发 送</el-button>
                </div>
            </template>
        </el-drawer>
    </div>
</template>
<script setup>
    import { ref, watch } from "vue"
    import DataUploadPlus from "@/components/DataComponents/DataUploadPlus.vue"
    import DataCommunicationBook from "@/components/DataComponents/DataCommunicationBook.vue"
    import { ElMessage } from 'element-plus'
    import { formatDate } from "@/utils/fomart"
    const props = defineProps(['show', 'defaultValue', 'state']);
    const emit = defineEmits(['update:show', 'submit', 'temporarySave']);
    const drawerShow = ref(false);
    const isAddCC = ref(false);
    const isShowQuoteContent = ref(false);
    const emailDetailInfo = ref({richText: '<p></p>'});
    const emailForm = ref({ receiverList: '', ccList: '', content: '', fileList: [] })
    watch(() => props.show, () => {
        drawerShow.value = props.show;
        if(drawerShow.value){
            setDedefaultValue();
        }
    }, { deep: true });
    const setDedefaultValue = () => {
        const defaultForm = props.defaultValue || {}
        console.log('defaultForm', defaultForm);
        emailForm.value.quoteMailId = defaultForm.id;
        emailForm.value.quteMailTitle = defaultForm.title;
        setQuoteEmail(defaultForm);
        console.log('props.state', props.state);
        if(props.state) return // 回复模式 直接赋予收件人 且不可更改
        emailForm.value.receiverList = [ defaultForm.sender ]
    };
    const setQuoteEmail = (defaultForm) => {
        emailDetailInfo.value.senderName = defaultForm.senderName;
        emailDetailInfo.value.sendTime = defaultForm.sendTime;
        emailDetailInfo.value.richText = defaultForm.richText;
        emailDetailInfo.value.receiversList = defaultForm.receiversList;
        emailDetailInfo.value.ccList = defaultForm.ccList;
        emailDetailInfo.value.fileList = defaultForm.fileList;
    };
    // 存草稿
    const temporarySave = () => {
        emit('temporarySave', emailForm.value);
        handleClose();
    };
    const removeFile = (item, index) => {
        emailForm.value.fileList.splice(index, 1);
    };
    const finish = () => {
        ElMessage({ type: 'success', message: '附件添加成功', })
    };
    const submitForm = () => {
        emit('submit', emailForm.value, '1');
        handleClose();
    };
    const resetFormData = () => {
        emailForm.value = { receiverList: [], ccList: [], content: undefined, fileList: [] };
    };
    const handleClose = () => {
        drawerShow.value = false;
        emit('update:show', false);
        resetFormData();
    };
    defineExpose({handleClose});
</script>
<style scoped lang="scss">
    :deep(.el-drawer__body){
        border-top: 1px solid #eee;
        border-bottom: 1px solid #eee;
        padding: 10px 20px;
    }
    .detail_title{
            display: flex;
            margin-top: 5px;
            margin-bottom: 10px;
        }
        .detail_item{
            display: flex;
            font-size: 14px;
            margin-bottom: 5px;
            span:first-child{ 
                width: 60px;line-height: 24px;
                text-align: justify;text-align-last: justify;
                text-justify: distribute-all-lines;
            }
            p{
                color: #666;
                line-height: 24px;
            }
        }
        .detail_content{
            margin: 10px 0;
            border-radius: 5px;
            min-height: 340px;
            background-color: #EBF5FF;
        }
        .file_list{
            padding-top: 5px;
            h3{
                font-size: 16px;
                margin-bottom: 10px;
            }
            .file_item{
                width: 480px;
                cursor: pointer;
                border-radius: 5px;
            }
            .file_item:hover{
                background-color: #f2f2f2;
            }
        }
</style>